<template>
  <view class="page">
    <!-- 地图容器 -->
    <map id="map"
         :longitude="longitude"
         :latitude="latitude"
         :scale="scale"
         :markers="markers"
         :show-location="true"
         @markertap="onMarkerTap"
         @tap="onMapTap"
         class="map"
    ></map>

    <!-- 底部商家列表 -->
    <view class="shop-btn" @tap="showShopList">
      商家列表
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app";

// 地图相关数据
const longitude = ref(116.404)
const latitude = ref(39.915)
const scale = ref(16)
const markers = ref([])

const selectedShopId = ref(null)

// 接收时间参数
const selectedDate = ref('')

// 页面加载时获取传递的参数
onLoad((options) => {
  if (options.date) {
    selectedDate.value = options.date
    console.log('接收到的时间参数:', selectedDate.value)
  }
})

// 地图标记点击事件
const onMarkerTap = (e) => {
  const markerId = e.detail.markerId
  const shop = shopList.value.find(s => s.id === markerId)
  if (shop) {
    selectedShopId.value = shop.id
  }
}

// 地图点击事件
const onMapTap = (e) => {
  console.log('地图点击:', e.detail)
}

// 显示商家列表
const showShopList = () => {
  console.log('显示商家列表')
  // 跳转到商家列表页面，传递时间参数
  let url = '/pages/topic/pub_select_shop_list'
  if (selectedDate.value) {
    url += `?date=${selectedDate.value}`
  }

  uni.navigateTo({
    url: url
  })
}

</script>

<style scoped>
.page {
  display: flex;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.map {
  width: 100vw;
  height: calc(100vh - 100rpx);
}

.shop-btn {
  width: 100vw;
  height: 100rpx;
  background-color: #AA0E99;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 100rpx;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 20rpx 20rpx 0 0;
  box-shadow: 0 -4rpx 12rpx rgba(170, 14, 153, 0.3);
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
}

.shop-btn:hover {
  background-color: #9A0D89;
  box-shadow: 0 -6rpx 16rpx rgba(170, 14, 153, 0.4);
  transform: translateY(-2rpx);
}

.shop-btn:active {
  transform: translateY(0);
  box-shadow: 0 -2rpx 8rpx rgba(170, 14, 153, 0.2);
}

</style>
